<template>
  <div class="student_container">
    <van-nav-bar
      title="小智同学"
      left-arrow
      @click-left="
        $router.go(-1);
        socket.disconnect();
      "
      fixed
      placeholder
    />
    <div class="chat_content" v-for="(item, index) in chat" :key="index">
      <div class="left" v-if="item.isStu">
        <van-image width="40" height="40" fit="cover" round :src="robot" />
        <span class="left_text">{{ item.msg }}</span>
      </div>
      <div class="right" v-else>
        <span class="right_text">{{ item.msg }}</span>
        <van-image width="40" height="40" fit="cover" round :src="user" />
      </div>
    </div>

    <van-search
      v-model="value"
      placeholder="请输入你想要发送的内容"
      @search="onSend"
    />
  </div>
</template>

<script>
import user from "@/assets/星爷至尊宝.webp";
import robot from "@/assets/朱茵.webp";
import io from "socket.io-client";
export default {
  name: "student",
  data() {
    return {
      value: "",
      socket: null,
      chat: [],
      user,
      robot
    };
  },
  methods: {
    onSend() {
      if (this.value !== "") {
        this.socket.emit("message", {
          // 消息
          msg: this.value,
          // 时间戳
          timestamp: Date.now()
        });
        this.chat.push({
          msg: this.value,
          timestamp: Date.now(),
          isStu: false
        });
      }
      this.value = "";
    }
  },
  created() {
    this.socket = io("http://118.24.62.36:8888");

    this.socket.on("connect", () => {
      console.log("建立连接成功了");
    });
    this.socket.on("message", msg => {
      this.chat.push({
        ...msg,
        isStu: true
      });
      console.log(msg);
    });
  }
};
</script>

<style lang="less">
.student_container {
  .van-nav-bar {
    height: 46px;
  }
  .chat_content {
    position: relative;
    width: 100%;
    padding: 5px 10px 0;
    overflow-y: scroll;
    .left {
      display: flex;
      width: 100%;
      align-items: center;
      margin-bottom: 10px;
      .left_text {
        position: relative;
        padding: 8px;
        font-size: 16px;
        line-height: 30px;
        max-width: 80%;
        padding: 0 15px 3px 5px;
        word-wrap: break-word;
        background-color: #dbf0fb;
        border-radius: 5px;
        margin-left: 10px;

        &::before {
          content: "";
          position: absolute;
          left: -16px;
          top: 50%;
          margin-top: -8px;
          border: 8px solid #dbf0fb;
          border-top-color: transparent;
          border-left-color: transparent;
          border-bottom-color: transparent;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      float: right;
      margin-bottom: 10px;
      .right_text {
        position: relative;
        padding: 8px;
        font-size: 16px;
        line-height: 30px;
        max-width: 80%;
        padding: 0 5px 3px 15px;
        word-wrap: break-word;
        background-color: #82ec73;
        border-radius: 5px;
        margin-right: 10px;

        &::before {
          content: "";
          position: absolute;
          right: -16px;
          top: 50%;
          margin-top: -8px;
          border: 8px solid #82ec73;
          border-top-color: transparent;
          border-right-color: transparent;
          border-bottom-color: transparent;
        }
      }
    }
  }
  .van-search {
    position: fixed;
    height: 46px;
    bottom: 0;
  }
}
</style>
